<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        .el-dialog__body{
            height: 50vh;
            overflow: auto;
        }
        #fleetManage .el-checkbox__input>.el-checkbox__inner {
            display:none;
        }
        #fleetManage .is-leaf + .el-checkbox .el-checkbox__inner {
            display:inline-block;
        }
        .tree_class{
            height: 970px;
            /*border-right: 1.5px solid #57a3f3;*/
        }
        @media (max-width: 1366px) {
            #fleetManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
            .tree_class{
                height: 6860px;
                /*border-right: 1px solid #57a3f3;*/
            }
        }
    </style>
</head>
<body>
<div id="fleetManage" class="center_div" style="display:none;">
    <div style="float:left;width:19%;background: white;position: absolute;" class="tree_class">
        <div style="height: 90%;overflow:auto;margin-top: 2%">
            <el-tree check-strictly
                     :load="loadChildren"
                     highlight-current
                     lazy
                     node-key="id"
                     :props="defaultProps"
                     :filter-node-method="filterNode"
                     ref="tree"
                     @node-click="loadData">
                <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                    <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                    <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
    </div>
    <div style="float:right;width: 80%">
        <div class="button" style="margin-top: 1%">
            <el-button type="primary" size="mini" @click="add">添加集团</el-button>
        </div>
        <div class="table-wrap">
            <el-table
                    :data="tableData"
                    style="width:100%;text-align: center;border-left:1px solid #EBEBEB"
                    header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB;border-left:none"
                    cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none;border-left:none">
                <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
                </el-table-column>
                <template v-if="buttons && buttons.length!==0">
                    <el-table-column
                            class="align-right"
                            width="230px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button v-for="button in buttons"
                                       @click="operate(scope.row,button.href)" :type="button.type" class="el-button el-button--text el-button--medium">{{button.label}}
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    @current-change="changePageNum"
                    :current-page="pageNum"
                    :total="total">
            </el-pagination>
        </div>
        <div>
            <el-dialog :title="title" :visible.sync="showBox" width="30%" append-to-body>
                <el-form ref="form" :model="form" label-width="80px" size="mini">
                    <el-row>
                        <el-form-item label="基本信息"></el-form-item>
                    </el-row>
                    <el-row v-show="showAdd">
                        <el-col :span="12">
                            <el-form-item label="所属集团">
                                <el-input v-model="form.parentName" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="集团名称" :required="true">
                                <el-input v-model="form.fleetName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-show="!showAdd">
                        <el-col :span="12">
                            <el-form-item label="集团编号">
                                <el-input v-model="form.fleetNum" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="集团名称">
                                <el-input v-model="form.fleetName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="所属省">
                                <el-select v-model="form.pv" placeholder="请选择" @change="getCityByProvince(form.pv)">
                                    <el-option
                                            v-for="item in provinceOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属市">
                                <el-select v-model="form.ct" placeholder="请选择">
                                    <el-option
                                            v-for="item in cityOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item>
                            <el-button type="primary" @click="addFleet" v-show="showAdd">添加</el-button>
                            <el-button type="primary" @click="updateFleet" v-show="!showAdd">修改</el-button>
                            <el-button type="primary" @click="closeBox">取消</el-button>
                        </el-form-item>
                    </el-row>

                </el-form>
            </el-dialog>
        </div>
    </div>
</div>
</body>
<script>
    VueComponent.createFleetManage=function () {
        if(window.fleetManageVue){
            return;
        }
        window.fleetManageVue = new Vue({
            el: "#fleetManage",
            data: {
                defaultProps: {
                    label: 'name',
                    isLeaf:'isLeaf'
                },
                fleetName:'',
                searchData:{},
                tableTitle: [
                    {label: '集团名称', prop: 'NAME'},
                    {label: '集团编号', prop: 'FleetNum'},
                    {label: '集团创建时间', prop: 'CREATEDATETIME'}
                ],
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                buttons: [{label: "添加子集团", href: "add"},{label: "编辑", href: "update"},{label: "删除", href: "delete"}],
                provinceOptions:[],
                cityOptions:[],
                systemOptions:[],
                showBox:false,
                showAdd:true,
                title:'',
                form: {
                    parentName:'',
                    fleetId:'',
                    fleetNum:'',
                    fleetName: '',
                    pv: '',
                    ct: '',
                    fleetSystem:[]
                },
                checkedDispatch: [],
                DispatchLicense1 :[{label:'语音',value:1}, {label:'地图',value:2},{label:'视频',value:3},{label:'会议',value:4},{label:'会话',value:5},{label:'数据统计',value:6}],
                DispatchLicense2 :[{label:'组派接',value:7}, {label:'动态重组',value:8},{label:'调度员呼叫',value:9},{label:'单呼',value:10},{label:'组呼',value:11},
                    {label:'临时组呼',value:12},{label:'IP语音呼叫',value:13},{label:'IP视频呼叫',value:14}],
                DispatchLicense3 :[{label:'轨迹回放',value:15}, {label:'框选呼叫',value:16},{label:'电子围栏',value:17}],
                DispatchLicense4 :[{label:'语音会议',value:18}, {label:'视频会议',value:19}],
                DispatchLicense5 :[{label:'媒体管理',value:20}, {label:'统计查询',value:21},{label:'业务管理',value:22},{label:'系统管理',value:23}],
                checkedApp: [],
                AppLicense1 :[{label:'语音',value:1}, {label:'通讯',value:2},{label:'消息',value:3},{label:'地图',value:4},{label:'工作台',value:5}],
                AppLicense2 :[{label:'图品回传',value:6}, {label:'录像回传',value:7},{label:'指挥中心',value:8},{label:'一件告警',value:9},{label:'视频推送',value:10}],
            },
            mounted: function () {
               this.query();
               this.getProvince();
               this.getSystem();
            },
            methods: {
                refreshNodeBy:function(){
                    var node = this.$refs.tree.getNode(window.fleetId);
                    node.loaded = false;
                    node.expand();
                },
                handleCheckedDispatchChange:function(value) {
                    var checkedCount = value.length;
                },
                getCityByProvince:function (key) {
                    this.form.ct='';
                    axios.post('/scs/fleetManage/getCityByProvince', {pv:key})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.cityOptions=data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getProvince:function () {
                    axios.post('/scs/fleetManage/getProvince', {})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.provinceOptions=data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getSystem:function () {
                    var that=this;
                    axios.post('/scs/fleetManage/getSystem', {})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    that.systemOptions=data.obj.list;
                                    that.form.fleetSystem=[];
                                    for(var i=0;i<data.obj.list.length;i++){
                                        that.form.fleetSystem.push(data.obj.list[i].System_ID);
                                    }
                                } else {
                                    that.$message(res.msg);
                                }
                            } else {
                                that.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                loadChildren: function (node, resolve) {
                    console.info("loadChildren");
                    var that =this;
                    if(node.data){
                        that.getChild(node.data.id , node.data.type ,resolve);
                    }else{
                        setTimeout(function(){ that.getChild( window.fleetId , 0 ,resolve);}, 0);
                    }
                },
                getChild: function (id, type,resolve) {
                    var jsonData={
                        parentId:id,
                        type:type
                    };
                    axios.post('/scs/fleetManage/getFleet',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                var childNodes = [];
                                if (res.obj) {
                                    childNodes = res.obj;
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                filterNode:function(value, data) {
                    if (!value)
                        return true;
                    else
                        return data.name.indexOf(value) !== -1;
                },
                loadData:function (node) {
                    this.fleetName=node.name;
                    this.searchData.fleetName=node.name;
                    this.searchData.fleetId=node.id;
                    var data = {
                        fleetId:node.id,
                        pageNum:1,
                        pageSize:this.pageSize
                    };
                    axios.post('/scs/fleetManage/getAllFleet', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    for(var i=0;i<data.obj.list.length;i++){
                                        data.obj.list[i].CREATEDATETIME=timeFormat(data.obj.list[i].CREATEDATETIME);
                                    }
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                query: function (pageNum) {
                    if(pageNum){
                        this.pageNum=pageNum
                    }
                    var data = {
                        fleetId:this.searchData.fleetId||window.fleetId,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    axios.post('/scs/fleetManage/getAllFleet', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (data.success) {
                                    for(var i=0;i<data.obj.list.length;i++){
                                        data.obj.list[i].CREATEDATETIME=timeFormat(data.obj.list[i].CREATEDATETIME);
                                    }
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                formClear:function () {
                    this.form.parentName='';
                    this.form.fleetId='';
                    this.form.fleetNum='';
                    this.form.fleetName='';
                    this.form.pv='';
                    this.form.ct='';
                    this.checkedDispatch=[];
                    this.checkedApp=[];
                },
                add:function () {
                    var that=this;
                    that.formClear();
                    that.showBox = true;
                    that.showAdd=true;
                    that.title = "添加集团";
                    that.setParentName();
                    that.cityOptions=[];
                },
                addFleet:function () {
                    var that = this;
                    var data = {
                        fleetName:that.form.fleetName,
                        pv:that.form.pv,
                        ct:that.form.ct,
                        fleetSystem:that.form.fleetSystem.join(',')
                    };
                    if(that.title === "添加集团"){
                        data.fleetId=window.fleetId;
                    }else if(that.title === "添加子集团"){
                        data.fleetId=that.form.fleetId;
                    }
                    if(that.form.fleetName===''){
                        that.$message('集团名称不能为空');
                        return
                    }
                    axios.post('/scs/fleetManage/addFleet',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                that.closeBox();
                                that.$message('添加成功');
                                that.refreshNodeBy();
                                that.query(that.pageNum);
                            }else{
                                that.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updateFleet:function () {
                    var that = this;
                    var data = {
                        fleetName:that.form.fleetName,
                        pv:that.form.pv,
                        ct:that.form.ct,
                        fleetId:that.form.fleetId,
                        fleetSystem:that.form.fleetSystem.join(',')
                    };
                    if(that.form.fleetName===''){
                        that.$message('集团名称不能为空');
                        return
                    }
                    axios.post('/scs/fleetManage/updateFleet',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                //根节点的集团名称如果修改  需要手动刷新
                                if(window.fleetId === that.form.fleetId ){
                                    var node = window.fleetManageVue.$refs.tree.getNode(window.fleetId);
                                    node.data.name = that.form.fleetName;
                                }
                                that.closeBox();
                                that.$message('编辑成功');
                                that.refreshNodeBy();
                                that.query(that.pageNum);
                            }else{
                                that.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                setParentName:function () {
                    var that=this;
                    var jsonData={
                        parentId:window.fleetId,
                        type:0
                    };
                    axios.post('/scs/fleetManage/getFleet',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                that.form.parentName=res.obj[0].name;
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                operate:function (row,href) {
                    var that = this;
                    that.getSystem();
                    that.formClear();
                    if(href.indexOf('add') !== -1){
                        that.showBox = true;
                        that.showAdd=true;
                        that.title = "添加子集团";
                        that.form.parentName=row.NAME;
                        that.form.fleetId=row.FLEET_ID;
                    }else if(href.indexOf('update') !== -1){
                        that.showBox = true;
                        that.showAdd=false;
                        that.title = "编辑集团";
                        that.form.fleetId=row.FLEET_ID;
                        that.form.fleetNum=row.FleetNum;
                        that.form.fleetName=row.NAME;
                        that.form.pv=row.PV_ID;
                        that.getCityByProvince(row.PV_ID);
                        that.form.ct=row.CT_ID;
                        that.form.fleetSystem=row.fleetSystem.split(',');
                        if(that.fleetName === ''){
                            that.setParentName();
                        }else{
                            that.form.parentName=that.fleetName;
                        }
                    }else{
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        axios.post('/scs/fleetManage/deleteFleet',{fleetId:row.FLEET_ID})
                            .then(function (res) {
                                var res = res.data;
                                if(res.success){
                                    that.$message('删除成功');
                                    that.refreshNodeBy();
                                    that.query(1);
                                }else {
                                    that.$message(res.msg);
                                }
                            })
                            .catch(function (err) {
                                console.warn(err);
                            });});
                    }
                },
                closeBox:function () {
                    this.formClear();
                    this.showBox=false;
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
